<template>
  <div id="workplace">
    <div class="wp_body">
      <div class="body_l">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          text-color="#000"
          active-text-color="#e4192e"
          @select="handleSelect"
        >
          <el-menu-item index="/Workplace">
            <i class="el-icon-menu"></i>
            <span slot="title">我要寄件</span>
          </el-menu-item>
          <el-menu-item index="/Workplace/searchexpress">
            <i class="el-icon-star-off"></i>
            <span slot="title">快递查询</span>
          </el-menu-item>
          <el-menu-item index="/Workplace/searchnode">
            <i class="el-icon-document"></i>
            <span slot="title">网点查询</span>
          </el-menu-item>
          <el-menu-item index="/Workplace/message">
            <i class="el-icon-setting"></i>
            <span slot="title">我的资料</span>
          </el-menu-item>
          <el-menu-item index="/Workplace/addressbook">
            <i class="el-icon-help"></i>
            <span slot="title">地址簿</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="body_r">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$router.push({
        path: keyPath[0],
      });
    },
  },
};
</script>

<style scoped>
.workplace {
  width: 100%;
  height: auto;
}
.wp_body {
  width: 92%;
  margin: 5px auto;
  min-height: 50vh;
}
.body_l {
  float: left;
  width: 20%;
}
.body_r {
  float: left;
  width: 78%;
  margin-left: 1%;
}
.body_r_top {
  width: 100%;
  min-height: 30vh;
}
</style>